<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Cloud / Облако</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

		<style>
			/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
			body {}

			.cloud {
				width: 81px;
				height: 22px;
				background: #f2f9fe;
				background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
				border-radius: 100px;
				-webkit-border-radius: 100px;
				-moz-border-radius: 100px;
				position: relative;
				margin: 120px auto 20px;
				animation: Floatingx 3s ease-in-out infinite;
			}

			.cloud:after,
			.cloud:before {
				content: '';
				position: absolute;
				background: #f2f9fe;
				z-index: -1
			}

			 .cloud:after {
				width: 40px;
				height: 40px;
				top: -25px;
				left: 33px;
				border-radius: 100px;
				-webkit-border-radius: 100px;
				-moz-border-radius: 100px;
			}

			.cloud:before {
				width: 30px;
				height: 30px;
				top: -14px;
				right: 40px;
				border-radius: 200px;
				-webkit-border-radius: 200px;
				-moz-border-radius: 200px;
			}

			.shadow {
				width: 70px;
				position: absolute;
				bottom: -10px;
				background: #000;
				left: 6px;
				z-index: -1;
				box-shadow: 0 0 12px 8px rgba(0, 0, 0, 0.2);
				-moz-box-shadow: 0 0 12px 8px rgba(0, 0, 0, 0.2);
				-webkit-box-shadow: 0 0 12px 8px rgba(0, 0, 0, 0.2);
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				animation: scalex 3s ease-in-out infinite;
			}
			
			@-webkit-keyframes Floatingx {
				from {
					-webkit-transform: translate(0, 0px);
				}
			
				65% {
					-webkit-transform: translate(0, 15px);
				}
			
				to {
					-webkit-transform: translate(0, 0px);
				}
			}
			
			@-webkit-keyframes scalex {
				from {
					-webkit-transform: scale(0.9);
				}
			
				65% {
					-webkit-transform: scale(1);
				}
			
				to {
					-webkit-transform: scale(0.9);
				}
			}
			.childwords{
			  text-align: center;
			  position: relative;	
			  top: -7px;
			  }
			}
			.m-color1{
				background: #f2f9fe;
			}
		</style>


	</head>

	<body>

		<div class="cloud">
			<div class="childwords">php</div>
			<span class='shadow'></span>
		</div>
		
		<div class="cloud m-color1">
			<div class="childwords ">php</div>
			<span class='shadow'></span>
		</div>
		
		<div class="cloud">
			<div class="childwords">php</div>
			<span class='shadow'></span>
		</div>



	</body>

</html>
